<!--
TailSubMenu 小尾巴子菜单组件
-->
<script setup>
import {ref, computed} from 'vue'
import {
  SUB_MENU_DISPLAY_CLASS_NONE,
  SUB_MENU_DROP_ICON_ROTATE_CLASS_DOWN,
  SUB_MENU_DROP_ICON_ROTATE_CLASS_LEFT,
  SUB_MENU_DROP_ICON_ROTATE_CLASS_RIGHT,
  SUB_MENU_POSITION_BOTTOM,
  SUB_MENU_POSITION_CLASS_BOTTOM,
  SUB_MENU_POSITION_CLASS_INTERNAL,
  SUB_MENU_POSITION_CLASS_LEFT,
  SUB_MENU_POSITION_CLASS_RIGHT,
  SUB_MENU_POSITION_INTERNAL,
  SUB_MENU_POSITION_LEFT,
  SUB_MENU_POSITION_RIGHT
} from "@/constant/tail_sub_menu_constant.js";

/**
 * 接收父组件传递的参数
 * @type {Prettify<Readonly<ExtractPropTypes<{}>>>}
 */
const props = defineProps({
  // 小尾巴子菜单组件是否收缩显示，收缩显示只显示标题图标
  isShrinkDisplay: {type: Boolean, default: false},
  // 小尾巴子菜单组件标题文字
  titleText: {type: String, default: '小尾巴子菜单组件标题文字'},
  // 小尾巴子菜单组件菜单项，由 {menuItemText: '', menuItemClickHandler: ()=>{}} 组成的数组
  subMenuItems: {type: Array, default: []},
  // 小尾巴子菜单组件菜单的显示位置
  subMenuPosition: {type: String, default: SUB_MENU_POSITION_INTERNAL},
})

/**
 * 动态控制子菜单显示
 * @type {Ref<UnwrapRef<boolean>>}
 */
// 是否显示子菜单
const subMenuIsShow = ref(false)
// 动态计算控制子菜单的样式类名
const subMenuClassNames = computed(() => {
  // 临时存储控制子菜单的样式类名
  const subMenuClassNames = []
  // 判断子菜单显示的位置，选择相应的子菜单样式类名
  switch (props?.subMenuPosition) {
    case SUB_MENU_POSITION_INTERNAL:
      subMenuClassNames.push(SUB_MENU_POSITION_CLASS_INTERNAL)
      break
    case SUB_MENU_POSITION_LEFT:
      subMenuClassNames.push(SUB_MENU_POSITION_CLASS_LEFT)
      break
    case SUB_MENU_POSITION_BOTTOM:
      subMenuClassNames.push(SUB_MENU_POSITION_CLASS_BOTTOM)
      break
    case SUB_MENU_POSITION_RIGHT:
      subMenuClassNames.push(SUB_MENU_POSITION_CLASS_RIGHT)
      break
  }
  // 动态添加子菜单隐藏的样式类名
  if (!(subMenuIsShow.value)) {
    // 添加隐藏样式类名
    subMenuClassNames.push(SUB_MENU_DISPLAY_CLASS_NONE)
  }
  return subMenuClassNames
})

// 子菜单标题点击事件处理器
function titleClickHandler() {
  // 控制子菜单显示与隐藏
  subMenuIsShow.value = !subMenuIsShow.value
}

// 子菜单鼠标悬浮事件处理器
function subMenuMouseOverHandler() {
  // 只有子菜单的位置不为 SUB_MENU_POSITION_INTERNAL 才执行
  if (props?.subMenuPosition !== SUB_MENU_POSITION_INTERNAL) subMenuIsShow.value = true
}

// 子菜单鼠标悬浮事件处理器
function subMenuMouseOutHandler() {
  // 只有子菜单的位置不为 SUB_MENU_POSITION_INTERNAL 才执行
  if (props?.subMenuPosition !== SUB_MENU_POSITION_INTERNAL) subMenuIsShow.value = false
}

// 动态计算子菜单项显示与隐藏的子菜单项样式类名
const subMenuItemClassName = computed(() => {
  return subMenuIsShow.value ? '' : 'tail-sub-menu-item-display-none'
})
// 动态计算子菜单显示与隐藏时子菜单下拉图标的样式
const subMenuDropIconClassName = computed(() => {
  if (subMenuIsShow.value) {
    // 根据子菜单显示位置，动态选择子菜单下拉图标的样式
    switch (props?.subMenuPosition) {
      case SUB_MENU_POSITION_INTERNAL:
        return SUB_MENU_DROP_ICON_ROTATE_CLASS_DOWN
      case SUB_MENU_POSITION_LEFT:
        return SUB_MENU_DROP_ICON_ROTATE_CLASS_LEFT
      case SUB_MENU_POSITION_BOTTOM:
        return SUB_MENU_DROP_ICON_ROTATE_CLASS_DOWN
      case SUB_MENU_POSITION_RIGHT:
        return SUB_MENU_DROP_ICON_ROTATE_CLASS_RIGHT
    }
  } else {
    return ''
  }
})
// 动态计算子菜单标题的样式
const subMenuTitleStyle = computed(() => {
  // 根据子菜单显示位置，动态计算子菜单标题的样式
  switch (props?.subMenuPosition) {
    case SUB_MENU_POSITION_LEFT:
      return {flexDirection: 'row-reverse'}
    default:
      return {flexDirection: 'row'}
  }
})
</script>

<template>
  <!-- 小尾巴子菜单组件 -->
  <div class="tail-sub-menu">
    <!-- 小尾巴子菜单组件标题盒子 -->
    <div
        class="tail-sub-menu-title-box"
        @mouseover="subMenuMouseOverHandler"
        @mouseout="subMenuMouseOutHandler"
    >
      <!-- 小尾巴子菜单组件标题 -->
      <div
          class="tail-sub-menu-title"
          :style="subMenuTitleStyle"
          @click="titleClickHandler"
      >
        <slot name="subMenuTitle">
          <!-- 小尾巴子菜单组件标题文字 -->
          <span class="tail-sub-menu-title-text">
            <!-- 小尾巴子菜单组件标题图标 -->
            <span class="tail-sub-menu-title-icon">
              <slot name="subMenuTitleIcon"></slot>
            </span>
            <span v-show="!isShrinkDisplay">{{ titleText }}</span>
          </span>
          <!-- 小尾巴子菜单组下拉图标 -->
          <span
              v-show="subMenuItems.length > 0"
              class="tail-sub-menu-drop-icon"
              :class="subMenuDropIconClassName"
          >
            <slot name="subMenuDropIcon"></slot>
          </span>
        </slot>
      </div>
      <!-- 小尾巴子菜单组件菜单项盒子 -->
      <div
          class="tail-sub-menu-items-box"
          :class="subMenuClassNames"
      >
        <slot name="subMenuItems">
          <!-- 小尾巴子菜单组件菜单项 -->
          <ul class="tail-sub-menu-items">
            <li
                class="tail-sub-menu-item"
                :class="subMenuItemClassName"
                v-for="(subMenuItem, idx) in subMenuItems"
                :key="idx"
                @click="subMenuItem?.menuItemClickHandler"
            >{{ subMenuItem?.menuItemText }}
            </li>
          </ul>
        </slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tail-sub-menu {

  /*
   * 清除默认样式
   */
  div, ul, li, span {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /*
   * 小尾巴子菜单组件标题盒子
   */
  .tail-sub-menu-title-box {
    position: relative;
    min-width: max-content;
    transition: all 0.5s;
    cursor: default;
    color: var(--tail-sub-menu-font-color);
    // 文字不能被选中
    user-select: none;
    // 宫格布局保证可以实现子菜单标题与子菜单项宽度一致并且具有过渡效果
    display: grid;
    // 列数为 1，每列宽 1fr（一个单元）即一个元素一行
    grid-template-columns: 1fr;
    // 优先填充行
    grid-auto-flow: row;

    /*
     * 小尾巴子菜单组件标题
     */
    .tail-sub-menu-title {
      padding: 0.5rem 0;
      background-color: var(--tail-sub-menu-bgc);
      transition: all 0.5s;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // 文本不换行
      white-space: nowrap;

      &:hover {
        background-color: var(--tail-sub-menu-hover-bgc);
        color: var(--tail-sub-menu-hover-font-color);
      }

      /*
       * 小尾巴子菜单组件标题文字
       */
      .tail-sub-menu-title-text {
        padding: 0 0.5rem;

        /*
         * 小尾巴子菜单组件标题图标
         */
        .tail-sub-menu-title-icon {

        }
      }

      /*
       * 小尾巴子菜单组件下拉图标
       */
      .tail-sub-menu-drop-icon {
        margin: 0 0.5rem;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /*
       * 小尾巴子菜单组件下拉图标旋转样式（向下）
       */
      .tail-sub-menu-drop-icon-rotate-down {
        transform: rotateZ(180deg);
        transition-delay: -0.1s;
      }

      /*
       * 小尾巴子菜单组件下拉图标旋转样式（向左）
       */
      .tail-sub-menu-drop-icon-rotate-left {
        transform: rotateZ(-90deg);
        transition-delay: -0.1s;
      }

      /*
       * 小尾巴子菜单组件下拉图标旋转样式（向右）
       */
      .tail-sub-menu-drop-icon-rotate-right {
        transform: rotateZ(90deg);
        transition-delay: -0.1s;
      }
    }

    /*
     * 小尾巴子菜单组件菜单项盒子（不同位置的公共样式）
     */
    .tail-sub-menu-items-box {
      // 缩进
      padding-left: 1.5rem;
      //transition: all 0.5s;

      /*
       * 小尾巴子菜单组件菜单项
       */
      .tail-sub-menu-items {

        /*
         * 小尾巴子菜单组件菜单项
         */
        .tail-sub-menu-item {
          padding: 0.5rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: start;
          // 文本不换行
          white-space: nowrap;
          //transition: all 0.3s;

          &:hover {
            background-color: var(--tail-sub-menu-hover-bgc);
            color: var(--tail-sub-menu-hover-font-color);
          }

          // 当前元素的父元素的第一个子元素
          &:first-child {
            border-top-right-radius: 0.5rem;
            border-top-left-radius: 0.5rem;
          }

          // 当前元素的父元素的最后一个子元素
          &:last-child {
            border-bottom-right-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
          }
        }
      }
    }

    /*
     * 小尾巴子菜单组件菜单项盒子（位置为 internal 的样式）
     */
    .tail-sub-menu-items-box-internal {
      height: 100%;
      background-color: var(--tail-sub-menu-item-bgc);
    }

    /*
     * 小尾巴子菜单组件菜单项盒子（位置为 left 的样式）
     */
    .tail-sub-menu-items-box-left {
      position: absolute;
      top: 0;
      right: 100%;
      // 取消缩进
      padding-left: 0;
      padding-right: 0.5rem;
      background-color: transparent;

      /*
       * 小尾巴子菜单组件菜单项
       */
      .tail-sub-menu-items {

        /*
         * 小尾巴子菜单组件菜单项
         */
        .tail-sub-menu-item {
          background-color: var(--tail-sub-menu-item-bgc);
        }
      }
    }

    /*
     * 小尾巴子菜单组件菜单项盒子（位置为 right 的样式）
     */
    .tail-sub-menu-items-box-right {
      position: absolute;
      top: 0;
      left: 100%;
      // 取消缩进
      padding-left: 0.5rem;
      background-color: transparent;

      /*
       * 小尾巴子菜单组件菜单项
       */
      .tail-sub-menu-items {

        /*
         * 小尾巴子菜单组件菜单项
         */
        .tail-sub-menu-item {
          background-color: var(--tail-sub-menu-item-bgc);
        }
      }
    }

    /*
     * 小尾巴子菜单组件菜单项盒子（位置为 bottom 的样式）
     */
    .tail-sub-menu-items-box-bottom {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      // 取消缩进
      padding-left: 0;
      padding-top: 0.5rem;
      background-color: transparent;

      /*
       * 小尾巴子菜单组件菜单项
       */
      .tail-sub-menu-items {

        /*
         * 小尾巴子菜单组件菜单项
         */
        .tail-sub-menu-item {
          background-color: var(--tail-sub-menu-item-bgc);
        }
      }
    }

    /*
     * 小尾巴子菜单组件菜单项盒子隐藏样式（抽屉收缩）(动态控制子菜单项显示的高度)
     * 动态添加与删除类防止父元素宽度变化
     */
    .tail-sub-menu-items-box-display-none {
      height: 0;
      overflow: hidden;

      /*
       * 小尾巴子菜单组件菜单项隐藏样式
       */
      .tail-sub-menu-item-display-none {
        opacity: 0;
      }
    }
  }
}
</style>